<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>
    <a-table childrenColumnName ref="table" bordered rowKey="id" :columns="columns" :pagination="ipagination"
      @change="changePage" :dataSource="List" :loading="loading" @expand="expand">
      <span slot="tags" slot-scope="tags">
        <a-tag color="cyan" v-if="tags">激活</a-tag>
        <a-tag color="red" v-else>冻结</a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="handleAdd(record)">新增分类</a>
        <a-divider type="vertical" />
        <a @click="edit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定删除?" @confirm="() => shopDelete(record)">
          <a href="javascript:;">删除</a>
        </a-popconfirm>
        <a-divider type="vertical" />
        <a @click="changeStatus(record)">变更状态</a>
      </span>
      <template slot="expandedRowRender" slot-scope="record,index">
        <a-table childrenColumnName rowKey="id" :columns="innerColumns" :dataSource="record.children"
          :pagination="false">
          <span slot="tags" slot-scope="tags">
            <a-tag color="cyan" v-if="tags">激活</a-tag>
            <a-tag color="red" v-else>冻结</a-tag>
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="handleAdd(record)">新增分类</a>
            <a-divider type="vertical" />
            <a @click="edit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除?" @confirm="() => shopDelete(record)">
              <a href="javascript:;">删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="changeStatus(record)">变更状态</a>
          </span>
          <template slot="expandedRowRender" slot-scope="record2,index">
            <a-table childrenColumnName rowKey="id" :columns="innerColumns2" :dataSource="record2.children"
              :pagination="false">
              <span slot="tags" slot-scope="tags">
                <a-tag color="cyan" v-if="tags">激活</a-tag>
                <a-tag color="red" v-else>冻结</a-tag>
              </span>
              <span slot="action" slot-scope="text, record">
                <a @click="edit(record)">编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除?" @confirm="() => shopDelete(record)">
                  <a href="javascript:;">删除</a>
                </a-popconfirm>
                <a-divider type="vertical" />
                <a @click="changeStatus(record)">变更状态</a>
              </span>
            </a-table>
          </template>
        </a-table>
      </template>
    </a-table>
    <a-modal v-model="visible" title="新增分类" @ok="handleOk">
      <a-form-model-item label="名称" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input v-model="add.name" />
      </a-form-model-item>
      <a-form-model-item label="排序" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input v-model="add.sort" />
      </a-form-model-item>
    </a-modal>
    <a-modal v-model="visible2" title="编辑" @ok="handleOk2">
      <a-form-model-item label="名称" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input v-model="editContent.name" />
      </a-form-model-item>
      <a-form-model-item label="排序" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input v-model="editContent.sort" />
      </a-form-model-item>
    </a-modal>
  </a-card>
</template>

<script>
import {
  httpAction,
  getAction,
  putAction,
  postAction,
  deleteAction
} from '@/api/manage'
export default {
  data() {
    return {
      loading: false,
      visible: false,
      visible2: false,
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
      columns: [
        {
          title: '店铺分类名称',
          align: "center",
          dataIndex: 'name',
        },
        {
          title: '分类级别',
          align: "center",
          dataIndex: 'level',
        },
        {
          title: '排序',
          align: "center",
          dataIndex: 'sort',
        },
        {
          key: 'tags',
          title: '状态',
          align: "center",
          scopedSlots: { customRender: 'tags' },
          dataIndex: 'status',
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",
        }
      ],
      innerColumns: [
        {
          title: '店铺分类名称',
          align: "center",
          dataIndex: 'name',
        },
        {
          title: '分类级别',
          align: "center",
          dataIndex: 'level',
        },
        {
          title: '排序',
          align: "center",
          dataIndex: 'sort',
        },
        {
          key: 'tags',
          title: '状态',
          align: "center",
          scopedSlots: { customRender: 'tags' },
          dataIndex: 'status',
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",
        }
      ],
      innerColumns2: [
        {
          title: '店铺分类名称',
          align: "center",
          dataIndex: 'name',
        },
        {
          title: '分类级别',
          align: "center",
          dataIndex: 'level',
        },
        {
          title: '排序',
          align: "center",
          dataIndex: 'sort',
        },
        {
          key: 'tags',
          title: '状态',
          align: "center",
          scopedSlots: { customRender: 'tags' },
          dataIndex: 'status',
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",
        }
      ],
      List: [],
      add: {},
      editContent: {},
      expandedRowKeys: [],
      //标记页数；页码
      ipagination: {
        current: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        total: 0
      },
      url: {
        gettree: '/shopType/getTree',
        add: '/shopType/add',
        edit: '/shopType/edit',
        delete: '/shopType/delete',
        changeStatus: '/shopType/changeStatus'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeStatus(e) {
      putAction(this.url.changeStatus + "?id" + "=" + e.id).then(res => {
        console.log(e)
        if (res.success) {
          this.$message.success(res.message)
          this.getList()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    shopDelete(e) {
      deleteAction(this.url.delete, { ids: e.id }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.getList()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    edit(e) {
      this.visible2 = true
      this.editContent = e
    },
    handleOk2() {
      putAction(this.url.edit, this.editContent).then(res => {
        if (res.success) {
          this.visible2 = false
          this.$message.success(res.message)
          this.getList()
          this.editContent = {}
        } else {
          this.$message.warning(res.message)
        }
        console.log(res)
      })
    },
    handleAdd(e) {
      if (e.id) {
        this.add.parentId = e.id
      }
      this.visible = true
    },
    handleOk(e) {
      postAction(this.url.add, this.add).then(res => {
        if (res.success) {
          this.visible = false
          this.$message.success(res.message)
          this.getList()
          this.add = {}
        } else {
          this.$message.warning(res.message)
        }
        console.log(res)
      })
    },
    getList() {
      this.loading = true
      getAction(this.url.gettree).then(res => {
        console.log(res)
        this.List = res.result
        this.loading = false
      })
    },
    detail(e) {

    },
    // 代理列表改变分页
    changePage(pagination) {
      console.log(pagination);
      this.ipagination.current = pagination.current
      this.queryParam.pageNo = pagination.current;
      this.queryParam.pageSize = pagination.pageSize;
      this.getList();
    },
    expand(e) {
      console.log(this.List, "1")
      if (e == false) {
        this.selectedRowKeysArrey2 = [];
      }
    },
  }
}

</script>
<style scoped lang="less">
</style>